<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form ref="form" :model="form" class="flex-bettom">
            <div class="flex">
              <el-form-item
                label="网点名称"
                label-width="120px"
                prop="networkNameId"
              >
                <el-select
                  v-model="form.networkNameId"
                  placeholder="请选择网点名称"
                  style="width: 286px"
                >
                  <el-option
                    v-for="item in networkList"
                    :key="item.id"
                    :label="item.networkName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="一级科目" label-width="120px" prop="firstId">
                <el-select
                  v-model="form.firstId"
                  placeholder="请输入一级科目"
                  style="width: 286px"
                >
                  <el-option
                    v-for="item in SubjectFirstList"
                    :key="item.id"
                    :label="item.firstName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button class="cx" @click="search">查询</el-button>
              <el-button class="cz" @click="clear">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-col :span="2.5">
        <div>
          <el-button class="jzy" @click="onSubmit">自定义二级科目</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-table
            ref="multipleTable"
            v-loading="loading"
            border
            :header-cell-style="{ textAlign: 'center', background: '#f5f5f5' }"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column type="selection" min-width="55" /> -->
            <el-table-column
              align="center"
              prop="networkSubjectFirst.firstCode"
              label="一级科目编码"
              min-width="120"
            />
            <el-table-column
              align="center"
              prop="networkSubjectFirst.firstName"
              label="一级科目"
              min-width="140"
            />
            <el-table-column
              align="center"
              prop="secondCode"
              label="二级科目编码"
              min-width="120"
            />
            <el-table-column
              align="center"
              prop="secondName"
              label="二级科目"
              min-width="120"
            />
            <el-table-column
              align="center"
              prop="sysUser.createBy"
              label="创建人"
              min-width="120"
            />
            <el-table-column
              align="center"
              prop="createTime"
              label="创建时间"
              min-width="120"
            />
            <el-table-column
              align="center"
              prop="name"
              label="操作"
              min-width="120"
            />
          </el-table>
        </div>
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: flex-end">
      <pagination
        :current-page="form.pageDate.pageNum"
        :page-size="form.pageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 弹窗 -->
      <el-dialog title="自定义二级科目" :visible.sync="dialogFormVisible">
        <el-form ref="addForm" :model="addForm" :rules="rules">
          <el-form-item
            label="网点名称"
            label-width="120px"
            prop="networkNameId"
          >
            <el-select
              v-model="addForm.networkNameId"
              placeholder="请选择网点名称"
              style="width: 286px"
            >
              <el-option
                v-for="item in networkList"
                :key="item.id"
                :label="item.networkName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="一级科目" label-width="120px" prop="firstId">
            <el-select
              v-model="addForm.firstId"
              placeholder="请输入一级科目"
              style="width: 286px"
            >
              <el-option
                v-for="item in SubjectFirstList"
                :key="item.id"
                :label="item.firstName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="二级科目" label-width="120px" prop="secondName">
            <el-input
              v-model="addForm.secondName"
              autocomplete="off"
              placeholder="请输入二级科目"
              style="width: 286px"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSub()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getOutletsList,
  getSubjectFirstList,
  // getSubjectList,
  subjectSearch,
  addSubject
} from '@/api/dashboard'
export default {
  data() {
    return {
      loading: false,
      form: {
        networkNameId: '',
        firstId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      formLabelWidth: '120px',
      addForm: {
        networkNameId: '',
        firstId: '',
        secondName: ''
      },
      // 一级网点
      SubjectFirstList: [],
      // 网点列表
      networkList: [],
      pages: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dialogFormVisible: false,
      tableData: [],
      rules: {
        networkNameId: [
          { required: true, message: '请选择网点名称', trigger: 'blur' }
        ],
        firstId: [
          { required: true, message: '请选择一级科目', trigger: 'blur' }
        ],
        secondName: [
          { required: true, message: '请选择二级科目', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // this.getList()
    this.getOutLet()
    this.getSubjectFirst()
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },
    // 获取一级网点下拉框
    getSubjectFirst() {
      getSubjectFirstList().then((res) => {
        if (res.code === 200) {
          this.SubjectFirstList = res.data
        }
      })
    },
    // // 显示表格数据
    // getList() {
    //   getSubjectList(this.pages.pageNum, this.pages.pageSize).then((res) => {
    //     console.log(res)
    //     if (res.code === 200) {
    //       this.tableData = res.data.data
    //       this.total = res.data.total
    //       console.log(this.pages.pageNum, this.pages.pageSize)
    //     } else {
    //       this.$message({
    //         message: res.msg,
    //         type: 'warning'
    //       })
    //     }
    //   })
    // },
    // 打开弹窗
    onSubmit() {
      this.dialogFormVisible = true
    },
    // 添加自定义二级科目
    addSub() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addSubject(this.addForm).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: res.data,
                type: 'success'
              })
              this.dialogFormVisible = false
            } else {
              this.$message({
                message: res.msg,
                type: 'warning'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 查询
    search() {
      this.loading = true
      subjectSearch(this.form).then((res) => {
        console.log('查询', res)
        if (res.code === 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        } else {
          this.tableData = []
          this.total = 0
        }
      })
      this.loading = false
    },

    // 重置
    clear() {
      this.$refs.form.resetFields()
    },
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.form.pageDate.pageNum = 1
      this.search()
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.search()
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #ffffff;
}
.cz {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  border: 1px solid #666666;
  color: #333;
}
.jzy {
  width: 180px;
  height: 42px;
  border-radius: 21px;
  border: 1px solid #d8d8d8;
  color: #333333;
  font-weight: 500;
}
</style>
